<template>
  <div>
    <el-row>
      <el-col :span="2">
        <el-button @click="addDialog=true" type="primary"
                   size="small" icon="el-icon-folder-add" round>添加班级
        </el-button>
        <el-dialog :before-close="cancel" title="添加班级" :visible.sync="addDialog" width="400px" center>
          <el-row>
            <el-col :span="10" :offset="6">
              <el-select clearable filterable v-model="classId" placeholder="请选择班级" style="width:100%">
                <el-option v-for="(item,index) in classList" :key="index" :label="item.className"
                           :value="item.classId"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="addCourseInClass">完 成</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="2">
        <div style="font-size: 14px;color: #a5a5a5">班级列表</div>
      </el-col>
    </el-row>
    <div v-for="(item,index) in list" :key="index">
      <el-row style="margin-top: 10px">
        <el-card shadow="hover" style="text-align: left">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="6">
                  <span style="font-size: 16px">{{ item.className }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="margin-top: 5px">
              <span style="font-size: 12px;color: #a5a5a5">总人数 : {{
                  item.classNumber === null ? 0 : item.classNumber
                }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" style="margin-top: 5px">
                  <span style="font-size: 12px;color: #a5a5a5">加入时间 : {{ item.joinTime }}</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2" :offset="9" style="margin-top: 15px">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-row>
                    <i class="el-icon-more el-icon--right"></i>
                  </el-row>
                  <el-row>
                    <span>更多</span>
                  </el-row>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-tickets"
                                    @click.native="toDetails(item.classId)">详情
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-remove-outline"
                                    @click.native="removeCourseOutClass(item.classId)">删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseClass',
  data () {
    return {
      course: {},
      addDialog: false,
      list: [],
      classList: [],
      classId: '',
    }
  },
  methods: {
    init () {
      this.course = this.$store.state.course

      this.$http({
        url: '/api/classCourse/list/' + this.course.courseId,
        method: 'get'
      }).then(res => {
        if (res.data.code === 4040) {
          this.list = res.data.result
        } else {
          this.$message({
            type: 'error',
            message: '获取信息失败!',
            duration: 2000,
          })
        }
      })

      this.$http({
        url: '/api/class/nameList',
        method: 'get'
      }).then(res => {
        this.classList = res.data.result
      })
    },
    cancel () {
      this.addDialog = false
      this.classId = ''
    },
    addCourseInClass () {
      if (this.course.courseId !== '') {
        this.$http.post('/api/classCourse', {
          classId: this.classId,
          courseId: this.course.courseId
        }).then((res) => {
          if (res.data.code === 2000) {
            this.$message({
              type: 'success',
              message: '添加班级成功!',
              duration: 1000,
            })
            this.init()
            this.cancel()
          } else {
            this.$message({
              type: 'error',
              message: '添加班级失败!',
              duration: 1500,
            })
            this.cancel()
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '未选择班级!',
          duration: 2000,
        })
      }
    },
    removeCourseOutClass (classId) {
      this.$http({
        url: '/api/classCourse/remove',
        method: 'post',
        data: {
          classId: classId,
          courseId: this.course.courseId
        }
      }).then(res => {
        if (res.data.code === 2000) {
          this.$message({
            type: 'success',
            message: '移除班级成功!',
            duration: 1000,
          })
          this.init()
        } else {
          this.$message({
            type: 'error',
            message: '移除班级失败!',
            duration: 1500,
          })
        }
      })
    },
    toDetails(classId){},
  },
  created () {
    this.init()
  },
}
</script>

<style scoped>

</style>
